<template>
	<view class="box">
		<view style="margin-top: 20px;">
			<uni-easyinput prefixIcon="search" v-model="value" placeholder="搜索" @iconClick="iconClick">
			</uni-easyinput>
		</view>
		
		<view style="width: 100%; height: 50px; justify-content: center; align-items: center;">
			<view style="display: flex; justify-content: center;">
				<text class="t">最近收藏</text>
				<text class="t">商品</text>
				<text class="t">活动</text>
			</view>
			
		</view>
		
		<view>
			<u-empty mode="" icon="http://cdn.uviewui.com/uview/empty/data.png" style="width: 100%;height: 100vh;">
				<view style="font-size: 15px; color: darkgray;">收藏为空</view>
			</u-empty>
			<!--  -->
			<view>
			      <u-swipe-action>
			        <u-swipe-action-item
			          :options="options1">
					  <view class="sc1">
					  	<image style="width: 100%; height: 190px; flex: 1;" src="../../../static/neiyu4.png"></image>
					  	<view style="flex: 1; padding-top: 10px; padding-left: 10px;">
					  		<text class="t1" >跑步机</text>
					  		<view style="padding-top: 20rpx;">
					  			<text class="t1">锻炼时间</text>
					  			<text class="t2">: 早晨 7点-8点</text>
					  		</view>
					  		
					  		<view style="padding-top: 10rpx;">
					  			<text class="t1">里程数</text>
					  			<text class="t2">: 10km</text>
					  		</view>
					  		
					  		<view style="padding-top: 10rpx;">
					  			<text class="t1">燃烧卡路里</text>
					  			<text class="t2">: 210</text>
					  		</view>
					  		
					  		<view style="padding-top: 10rpx;">
					  			<text class="t1">参加人数</text>
					  			<text class="t2">: 13</text>
					  		</view>
					  		<u-rate :value="3.7" readonly size="40rpx"></u-rate>
							
					  	</view>
					  </view>
			        </u-swipe-action-item>
			      </u-swipe-action>
			</view>
			
			<view>
			      <u-swipe-action>
			        <u-swipe-action-item
			          :options="options1">
					  <view class="sc1">
					  	<image style="width: 100%; height: 190px; flex: 1;" src="../../../static/neiyu5.png"></image>
					  	<view style="flex: 1; padding-left: 10px;">
					  		<text class="t1" >骑行领队</text>
					  		<text class="t2" >: 布旅不停骑游团 阿伟</text>
					  		
					  		<view style="padding-top: 10rpx;">
					  			<text class="t1">集合时间</text>
					  			<text class="t2">: 05月16日 周四 08:53-14:53</text>
					  		</view>
					  		
					  		<view style="padding-top: 10rpx;">
					  			<text class="t1">骑行路线</text>
					  			<text class="t2">: 北京工商管理专修学院--八达岭长城</text>
					  		</view>
					  		
					  		<view style="padding-top: 10rpx;">
					  			<text class="t1">集合地点</text>
					  			<text class="t2">: 昌平北工商</text>
					  		</view>
							<u-rate :value="4" readonly size="40rpx"></u-rate>
					  	</view>
					  </view>
			        </u-swipe-action-item>
			      </u-swipe-action>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				
				 options1: [{
                    text: '删除',
					style: {
                        backgroundColor: '#f56c6c'
                    }
                }]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.box{
		height: 100vh;
	}
	.t{
		color: 	#3CB371;
		padding-left: 40px;
		padding-top: 20px;
	}
	.sc1{
		display: flex;
		width: 100%; 
		height: 20%;
		margin-top: 20px;
		background-color: white;
		border-radius: 10px; /* 圆角半径 */
	}
	.t1{
		font-weight : bold;
		
	}
	.my-button{
			background-color: #4CAF50; /* 绿色背景 */  
		    color: white; /* 文字颜色 */  
		    border: none; /* 无边框 */  
		    cursor: pointer; /* 鼠标指针样式 */ 
			width: 10px;
			height: 20px;
			font-size: 10px;
	}
	.button2{
		width: 100px; height: 50px; background-color: #4CAF50; color: white;
		
	}
	/*  */
	.u-page {
        padding: 0;
    }

    .u-demo-block__title {
        padding: 10px 0 2px 15px;
    }

    .swipe-action {
        &__content {
             padding: 25rpx 0;
    
            &__text {
                 font-size: 15px;
                 color: $u-main-color;
                 padding-left: 30rpx;
             }
        }
    }
</style>
